<template>
<div>
  <a-col align='center'>
  <span v-for="(user,index) in memberList" :key="index">
    <memberAvatar :username="user.username"></memberAvatar>
  </span>
  </a-col>
</div>
</template>

<script>

import memberAvatar from '../team/memberAvatar';
import axios from 'axios';

export default{
  name: 'memberList',

  props: {
    propGroupid: {
      type: Number,
    },
  },

  watch: {
    propGroupid: {
      handler(newVal) {
        this.groupid=newVal;
      },
      deep: true,
      immediate: true,
    }
  },

  data(){
    return{
      groupid:'',
      memberList: [],
    };

  },

  components: {
    memberAvatar,
  },

  mounted(){
    this.memberList=[];
    let formData=new FormData();
    console.log('memberList'+this.groupid)
    formData.append('groupid',this.groupid);
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    };
    var _this=this;
    axios.post('http://192.168.10.4:8000/api/get_user_bygroup/',formData,config)
      .then(function(response) {
        if(response) {
          console.log(response)
          _this.memberList=response.data;
        }
      }).catch(error=> {
        console.log('error',error);
      })
  }
}

</script>
<style></style>
